<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>麦味·我的订单</title>
    <meta name="description" content="">
    <meta name="keywords" content="">


    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet">

    <link rel="stylesheet" href="/assets/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/assets/css/animate.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons/css/ionicons.min.css">

    <link rel="stylesheet" href="/assets/css/owl.carousel.min.css">

    <link rel="stylesheet" href="/assets/fonts/flaticon/font/flaticon.css">

    <link rel="stylesheet" href="/assets/fonts/fontawesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="/assets/css/select2.css">


    <link rel="stylesheet" href="/assets/css/helpers.css">
    <link rel="stylesheet" href="/assets/css/style.css">

    <style type="text/css">
        table, th, td {
            border: 1px solid #E4E4E4;
        }

        table {
            width: 100%;
        }

        a.ex2:hover, a.ex2:active {
            color: #149d5b;
            font-size: 120%;
        }

        a.ex:hover, a.ex:active {
            color: #00ca4c;
            font-size: 100%;
        }

    </style>

</head>
<body>


<nav class="navbar navbar-expand-lg navbar-dark probootstrap_navbar" id="probootstrap-navbar">
    <div class="container">
        <a class="navbar-brand" href="/index">My Way</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#probootstrap-menu"
                aria-controls="probootstrap-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span><i class="ion-navicon"></i></span>
        </button>
        <div class="collapse navbar-collapse" id="probootstrap-menu">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="/index">首页</a></li>
                <li class="nav-item active"><a class="nav-link" id="order">我的订单</a></li>
                <li class="nav-item"><a class="nav-link" href="/enter" id="denglu">登录</a></li>
                <li class="nav-item"><a class="nav-link" href="/register" id="zhuce">注册</a></li>
                <script>
                    var name = "uName";//Cookies名字
                    this.GetCookie = function (name) {
                        var ck = document.cookie;
                        var exp1 = new RegExp(name + "=.*?(?=;|$)");
                        var mch = ck.match(exp1);
                        return mch ? unescape(mch[0].substring(name.length + 1)) : null;
                    }
                    if (GetCookie(name)) {
                        document.getElementById("denglu").innerText = "您好，" + GetCookie(name);
                        document.getElementById("denglu").removeAttribute("href");
                        document.getElementById("order").href = "/userorder";
                        document.getElementById("order").onclick = "";
                        document.getElementById("zhuce").innerText = "退出登录";
                        document.getElementById("zhuce").href = "/enter/logout";
                    }
                </script>
            </ul>
        </div>
    </div>
</nav>
<!-- END nav -->


<section class="probootstrap-cover overflow-hidden relative" style="background-image: url('/assets/images/bg_1.jpg');"
         data-stellar-background-ratio="0.5" id="section-home">
    <div class="overlay"></div>
    <div class="container">

        <h2 class="display-4 border-bottom probootstrap-section-heading text-center">订单详情</h2>

        <div class="media probootstrap-media d-flex align-items-stretch mb-4 probootstrap-animate fadeInUp probootstrap-animated">
            <div class="media-body">
                <div class="row">
                    <div class="col-md-6 probootstrap-form" style="margin:auto;" th:object="${orderOutput}">
                        <p>酒店名：<span name="HotelName" th:text="*{HotelName}"></span></p>
                        <p>地&nbsp;&nbsp;&nbsp;址：<span name="HotelAddress" th:text="*{HotelAddress}">123</span></p>
                        <p>房&nbsp;&nbsp;&nbsp;型：<span name="roomType" th:text="*{roomType}">无早</span></p>
                        <p><span name="arrDateStr" th:text="*{arrDateStr}"></span>到<span name="depDateStr"
                                                                                         th:text="*{depDateStr}"></span>&nbsp;共<span
                                th:text="${nNight}"></span>晚 *&nbsp;<span th:text="${quantity}"></span>间</p>
                        <p>总价：<span name="totalPrice" th:text="*{totalPrice}">元</span></p>
                    </div>
                    <div class="col-md-5 probootstrap-form" style="margin:auto;" th:object="${orderOutput}">
                        <p>入住人：<span name="uName" th:text="*{uName}"></span></p>
                        <p>手机号：<span name="uPhone" th:text="*{uPhone}"></span></p>
                        <p>订单号：<span name="oId" th:text="*{oId}">123</span></p>
                        <p>状态：<span id="s" name="oStatus" th:text="*{oStatus}"></span></p>
                        <p id="stu" align="center" valign="middle">
                            <a id="o" class="ex btn btn-primary" style="color: #fff;float:right"
                               th:href="@{'http://localhost:8280/orderdetail/checkout?' + ${orderOutput.oId}}">
                                退 订
                            </a>
                        </p>
                    </div>
                </div>
                <div class="col-md">
                    <br>
                    <br>
                    <p><a class="ex2" style="float:right;" href="/userorder">返回我的订单</a></p>
                    <br>
                    <p><a class="ex2" style="float:right;" href="http://localhost:8280">返回首页</a></p>
                </div>
            </div>

        </div>
    </div>
    </br></br></br></br></br></br></br>
    <div class="col-md-12 text-center">
        <p style="color:white;" class="probootstrap_font-14">Copyright © 2019 . My Way 麦味 · 酒店订购</p>
    </div>
</section>
<!-- END section -->

<script src="/assets/js/jquery.min.js"></script>

<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/owl.carousel.min.js"></script>
<script src="/assets/js/jquery.waypoints.min.js"></script>
<script src="/assets/js/jquery.easing.1.3.js"></script>
<script src="/assets/js/select2.min.js"></script>
<script src="/assets/js/main.js"></script>

<script th:inline="javascript">
    $(document).ready(function () {
        if($('#s').text()=="已退订"){
            $('#stu').text("订单已关闭")
        }
        else if($('#s').text()=="待付款"){
            $('#o').text("支付")
        }
        else if($('#s').text()=="已完成"){
            $('#stu').text("订单已完成")
        }
        else
            return;
    });
</script>

</body>
</html>